Overscan icon: S - Breakout

Chosen 2026-10-10. A star bursting out of a screen, with blue and red light spilling out both sides: the glow running past the edge, which is what Overscan does. Colours = "Pin 5" from the colour options: a rainbow screen frame and a ring round the edge in the StarSync rings' own cyan, purple and red, so it sits in the StarSync family.

Animations

Hover the big icon (or tab to a button) for the hover animation. Both end exactly on the still icon, and neither changes the icon's size. With "reduce motion" switched on in Windows, neither plays.

Launch (about 1.4 s)

0.0 s the dark disc fades in
0.1 s the StarSync ring draws itself round, starting from its cyan (like the StarSync logo's intro)
0.15 s the rainbow screen frame draws itself round
0.55 s the star bursts out of the middle, growing past the top and bottom of the screen (no spin)
0.9 s blue light shoots out to the left and red to the right at the same moment, a touch long, then settles

Hover (about 0.7 s)

the side light pulls back into the screen and shoots out again
at the same time the star twinkles: squashes wide, then springs back

Colour options

Try colours on the icon. Click a preset to load it, then fine-tune on the right. The big icon and the small sizes update live; hover the big one for the hover animation. "Pin to compare" keeps a choice in the strip at the bottom so you can line several up. Your last choice and pins are remembered in this browser.

Presets

16 px, zoomed

24 px, zoomed

32 px, zoomed

14:30
10/10/2026

16 to 32 px use the small cut, like the real files. The zoomed squares are drawn by the browser, so they are close to the real PNGs but not pixel-identical.

Colours

Light style

Screen frame

Ring round the edge

Star

Turn the sweep (where cyan, purple and red sit)

Surprises

Twelve random looks at once (colours, light style, frame, ring, star, sweep). Click one to load it into the editor above.

Pinned to compare

Nothing pinned yet.

Animated at other sizes

Same animation at the sizes it will actually be used: site hero, app windows, buttons. Hover any of them.

128

72 (Overscan page)

Every size, as exported

The real PNG files at their real size, on four backgrounds. 16 to 32 px use the small cut (thicker rays, frame and ring so they don't vanish in the tray). 40 px and up use the master.

On black

On white

On grey

On a colourful wallpaper

Large

512

1024 px is in the files too (too big to show here): open overscan-icon-1024.png.

Small sizes, zoomed 8x

What each pixel looks like at tray sizes. This is where icons fall apart, so it's worth a close look.

16 px

20 px

24 px

32 px

Master vs small cut

The two drawings the files are made from, both shown large so the difference is clear.

master (40 px and up)

small cut (16 to 32 px)

Where it will appear

Mock-ups of the places the icon ends up. Hover the tray icon and the site button.

Tray (dark taskbar), 16 px

14:30
10/10/2026

Tray (light taskbar), 16 px

14:30
10/10/2026

Tray at 150% scaling, 24 px

14:30
10/10/2026

Settings window title bar, 16 px

Overscan Settings – □ ✕

Desktop shortcut, 48 px

Overscan

Other app

Start menu, 32 px

Files

Overscan

Settings

Installer header, 48 px

License AgreementPlease read the following before continuing.

Browser tab and site button

Overscan for Windows - StarSync

Colours

Fixed, they don't change with light or dark mode (the dark disc works on both).

#0B0B0B disc + screen

#F2F2F2 star + hot core of the light

#31BAF4 left light

#EE2839 right light

ring: StarSync sweep #00FFFF / #8C3CFF / #FF3C3C

frame: full rainbow

Files

All in Documents/Scripts/Overscan/assets/app-icon/.

File	What it is
`overscan-icon.svg`	Master drawing, any size from 40 px up. Use this for print or anything big.
`overscan-icon-small.svg`	Small cut for 16 to 32 px.
`png/overscan-icon-<size>.png`	16, 20, 24, 32, 40, 48, 64, 96, 128, 256, 512, 1024 px.
`overscan-app.ico`	The Windows icon file (16 to 256 px inside, each drawn at its own size). Goes into the app, the installer and shortcuts.
`ss-overscan-icon.js`	The two animations for web pages (the site already uses it on the Overscan page).
`make_icon_svgs.py`	Writes both SVGs from the chosen colours. Change a colour there, re-run, then re-render the PNGs and the .ico.
`previous - plain white frame/`	The first version (white frame, no ring, cyan and red), kept in case.
`Overscan Icon.html`	This page.

Not done yet: putting it into the app itself (tray, windows, installer, splash). The app's own animations (tray and splash) need a copy of these two animations written for the app.